import React, { useState, useEffect } from 'react'
import styles from './interviewList.less'
import { observer } from 'mobx-react-lite'
import { Table, Input, Button,Switch  } from 'antd'
import { Link } from 'umi'
import { getSkillLable, getSkillList ,getInterviewManage} from '@/services/index'
import { Iskill, IInterviewListItem, IInterviewListQuery,IskillListItem } from '@/utils/interface'
import { SearchOutlined } from '@ant-design/icons'

const status = ['全部', '通过', '未通过', '不确定']
const issoundrecord = ['无', '有']
const columns = [
    {
        title: '岗位名称',
        render: (row: IInterviewListItem) => {
            return <Link to={`/teachers/interviewRecord?interviewId=${row.interviewId}&shield=0&see=true`}>
                {row.stationName}
            </Link>
        }
    },
    {
        title: '公司名称',
        dataIndex: 'companyName',
    },
    {
        title: '面试时间',
        dataIndex: 'interviewTime',
    },
    {
        title: '面试官',
        dataIndex: 'intervierManagement',
    },
    {
        title: '专业',
        dataIndex: 'majorName',
    },
    {
        title: '提交人',
        dataIndex: 'commitName',
    },
    {
        title: '面试结果',
        render: (row: IInterviewListItem) => <span className={styles[`status${row.status}`]}>{status[row.status===0?row.status=3:row.status]}</span>
    },
    {
        title: '录音文件',
        render: (row: IInterviewListItem) => <span className={styles[`issoundrecord${row.issoundrecord}`]}>{issoundrecord[row.issoundrecord]}</span>
    },
    {
        title: '屏蔽',
        render: (row: IInterviewListItem) => {
            if (row.shield === 1) {
                return <div className={styles.action}>
                    <Switch defaultChecked />
                </div>
            }
            else {
                return <div className={styles.action}>
                    <Switch defaultChecked={false} />
                </div>
            }
        }
    },
];

const InterviewManage: React.FC = () => {
    let [curSkill, setCurSkill] = useState('')
    let [curStatus, setCurStatus] = useState(0)
    let [searchTitle, setSearchTitle] = useState('')
    let [title, setTitle] = useState('')
    let [dataSource, setDateSource] = useState<IInterviewListItem[]>([])
    let queryParams: IInterviewListQuery = {  searchTitle: '', pageNum: 0, pageSize: 0}

    // 发起请求获取项目列表
    useEffect(() => {
        // 拼接参数
        if (curStatus) {
            queryParams = { ...queryParams, majorId: curSkill, searchTitle, status: curStatus }
        }
        else {
            queryParams = { ...queryParams, majorId: curSkill, searchTitle, status: '' as unknown as number }
        }
        
        getInterviewManage(queryParams).then(res => {
            if (res.code === 200) {
                setDateSource(res.rows)
            }
        })
    }, [curSkill, curStatus,  searchTitle])

    return <div className={styles.plantlist}>
        <section className={styles.sec}>面试 / 面试记录管理</section>

        <section className={styles.sec2}>
            <div>
                <Input className={styles.input2} placeholder="搜索岗位" suffix={<SearchOutlined onClick={() => setSearchTitle(title)} />} value={title} onChange={e => setTitle(e.target.value)} onKeyDown={e => {
                    if (e.keyCode === 13) {
                        setSearchTitle(title)
                    }
                }} />
            </div>
        </section>

        <Table className={styles.ant_table_wrapper} rowKey='interviewId' dataSource={dataSource} columns={columns}></Table>
    </div>
}
export default observer(InterviewManage)